<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="main" id="main">
        <h1 class="white">
            {{year}}
        </h1>
        <!-- 
            vue的使用方法可以详见vue.js的官方主页，
            这里主要用到的是v-for循环,获取数组内容及索引值,
            v-bind:style绑定css变量
            以及使用v-bind:class绑定CSS指定类 
        -->
        <div v-for="(m,k) in month" class="month" v-bind:style="{'--m': k}" v-bind:class="{white:k == 0}">
            {{ m }}
        </div>
        <div v-for="(d,k) in days" class="days" v-bind:style="{'--d':k}" v-bind:class="{white:k == 0}">
            {{d}}
        </div>
        <div v-for="(h,k) in hours" class="hours" v-bind:style="{'--h':k}" v-bind:class="{white:k == 0}">
            {{h}}
        </div>
        <div v-for="(min,k) in minutes" class="min" v-bind:style="{'--min':k}" v-bind:class="{white:k == 0}">
            {{min}}
        </div>
        <div v-for="(s,k) in seconds" class="sec" v-bind:style="{'--s':k}" v-bind:class="{white:k == 0}">
            {{s}}
        </div>
    </div>
</body>
</html>
<script src="script.js"></script>